<template>
  <div style="background-color: #f2e8d9; padding: 20px;">
    <div style="display: flex; justify-content: center; align-items: center;">
      <div style="width: 400px; background-color: #fff8e1; padding: 20px; border-radius: 15px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);">
        <h1 style="color: #795548; font-size: 24px; text-align: center; margin-bottom: 20px;">老年人社区活动咨询服务</h1>
        <p style="color: #666; font-size: 16px; text-align: center;">欢迎来到老年人社区活动咨询页面，这里可以为您解答关于社区活动的各种问题。</p>
        <div style="margin-top: 20px;">
          <el-input placeholder="请输入您的问题" v-model="question" style="width: 100%;"></el-input>
          <el-button type="warning" @click="submitQuestion" style="margin-top: 10px;">提交问题</el-button>
        </div>
        <div v-if="answer" style="margin-top: 20px;">
          <h2 style="color: #795548; font-size: 18px;">回答：</h2>
          <p style="color: #666; font-size: 16px;">{{ answer }}</p>
        </div>
        <div style="margin-top: 20px;">
          <h3 style="color: #795548; font-size: 18px;">常见问题快速链接：</h3>
          <ul style="list-style-type: none; padding: 0;">
            <li style="margin-bottom: 10px;"><a href="#" @click.prevent="setQuestion('活动时间')" style="color: #795548; text-decoration: none;">活动时间是多久？</a></li>
            <li style="margin-bottom: 10px;"><a href="#" @click.prevent="setQuestion('活动地点')" style="color: #795548; text-decoration: none;">活动在哪里举办？</a></li>
            <li style="margin-bottom: 10px;"><a href="#" @click.prevent="setQuestion('活动报名方式')" style="color: #795548; text-decoration: none;">活动如何报名？</a></li>
          </ul>
        </div>
        <el-button type="danger" @click="$router.push('/Home')">返回首页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Input, Button } from 'element-plus';

export default {
  name: "Talk",
  components: {
    ElInput: Input,
    ElButton: Button
  },
  data() {
    return {
      question: '',
      answer: null
    };
  },
  methods: {
    submitQuestion() {
      if (this.question.includes('活动时间')) {
        this.answer = '具体活动时间可以在社区公告栏查看或者咨询社区工作人员。';
      } else if (this.question.includes('活动地点')) {
        this.answer = '不同活动的地点可能不同，同样可以在社区公告栏或向工作人员询问。';
      } else if (this.question.includes('活动报名方式')) {
        this.answer = '报名方式通常在社区公告栏公布，或者您可以前往社区服务中心咨询工作人员。';
      } else {
        this.answer = '很抱歉，暂时无法回答您的问题，请联系社区工作人员获取更准确的信息。';
      }
    },
    setQuestion(q) {
      this.question = q;
      this.submitQuestion();
    }
  }
};
</script>

<style scoped>
</style>